<!--
 * @Author: 王鹏 2911783749@qq.com
 * @Date: 2022-11-07 15:12:39
 * @LastEditors: 王鹏 2911783749@qq.com
 * @LastEditTime: 2022-11-08 15:04:57
 * @FilePath: \vue3Mixiu\code\src\views\Login.vue
 * @Description: 登录页面
-->
<template>
  <div class="login">
    <div class="form_container">
      <div class="form_container_head">米修在线后台管理系统</div>
      <div class="form_container_body">
        <div class="loginForm">
          <el-form
            ref="loginFormRef"
            :rules="loginFormRules"
            :model="loginForm"
            label-width="80px"
          >
            <el-form-item label="邮箱" prop="email">
              <el-input
                v-model="loginForm.email"
                placeholder="请输入邮箱"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                v-model="loginForm.password"
                placeholder="请输入密码"
                type="password"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                style="width: 100%"
                size="large"
                @click="handleSubmit(loginFormRef)"
                >登录</el-button
              >
            </el-form-item>
            <el-form-item style="text-align: right">
              还没有账号？现在
              <router-link to="/register">注册</router-link>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import { loginType } from "../untils/type";
// 引入解析token插件
import jwt_decode from 'jwt-decode'
// 引入登录接口
import {login} from '../untils/api'
// 引入路由
import router from '../router/index'
// 提交规则
import type { FormInstance } from "element-plus";
// 引入pinia
import {userAuth} from '../store'
const store = userAuth()
const loginFormRef = ref<FormInstance>();
// 登录表单
const loginForm = reactive<loginType>({
  email: "222333@qq.com",
  password: "123321",
});
// 校验规则
const loginFormRules = reactive({
  email: [
    {
      required: true,
      type: "email",
      message: "邮箱号格式不正确",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "密码不能为空",
      trigger: "blur",
    },
    {
      min: 6,
      max: 30,
      message: "密码请保持在6到30个字符之间",
      trigger: "blur",
    },
  ],
});
// 提交事件
const handleSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      let res = await login(loginForm);
      console.log(res);
      if (res.status == 200) {
        // @ts-ignore
        ElMessage({
          message: "登录成功",
          type: "success",
        });
        sessionStorage.setItem('token',res.data.token)
        let decode=jwt_decode(sessionStorage.token)
        console.log(decode);
        store.setUser(decode)
        router.push('/')
      }
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
</script>
<style scoped>
</style>